<template>
  <Layout class="formula-config">
    <LayoutHeader>
      <FormulaInput v-model="innerValue" ref="FormulaInput"/>
    </LayoutHeader>
    <LayoutBody>
      <Layout style="height: 100%">
        <LayoutBody>
          <VariableContainer @selectVariable="selectVariable"
                             @addVariable="addVariable" :config="variableContainerConfig"/>
        </LayoutBody>
        <LayoutSide style="width: 400px; overflow: auto">
<!--          <FormulaActions @addAction="addAction" @extend="extend"/>-->
          <Component :is="actionType" @addAction="addAction" @extend="extend"/>
        </LayoutSide>
      </Layout>
      <FieldValueGetter ref="FieldValueGetter" @addConst="addConst"/>
    </LayoutBody>
  </Layout>
</template>
<script>
import Layout from '@comp/hhd/layout/Layout.vue';
import LayoutHeader from '@comp/hhd/layout/LayoutHeader.vue';
import LayoutBody from '@comp/hhd/layout/LayoutBody.vue';
import LayoutSide from '@comp/hhd/layout/LayoutSide.vue';
import FormulaInput
  from '@comp/hhd/design/FormDesigner/field/comps/form/FieldValueFormulaGroups/configs/FormulaInput.vue';
import {createModelForVue, createProps} from '@/utils';
import {createFormDefinition, getFormFieldById} from '@comp/hhd/design/FormDesigner/types';
import FormulaActions
  from '@comp/hhd/design/FormDesigner/field/comps/form/FieldValueFormulaGroups/configs/FormulaActions.vue';
import VariableContainer
  from '@comp/hhd/design/FormDesigner/field/comps/form/FieldValueFormulaGroups/configs/VariableContainer.vue';
import FieldValueGetter
  from '@comp/hhd/design/FormDesigner/field/comps/form/FieldValueFormulaGroups/configs/FieldValueGetter.vue';
import FormulaActionsForSQL
  from '@comp/hhd/design/FormDesigner/field/comps/form/FieldValueFormulaGroups/configs/FormulaActionsForSQL.vue';

export default {
  name: 'FormulaConfig',
  components: {
    FieldValueGetter,
    VariableContainer,
    Layout,
    LayoutBody,
    LayoutSide,
    FormulaInput,
    FormulaActionsForSQL,
    FormulaActions,
    LayoutHeader
  },
  model: createModelForVue('formula'),
  props: {
    actionType: createProps(String, 'FormulaActions'), //FormulaActionsForSQL
    variableContainerConfig: createProps(Object),
    formDefinition: createProps(Object, createFormDefinition),
    formula: createProps(String),
    getFieldById: createProps(Function),
  },
  methods: {
    addAction(action) {
      this.$refs.FormulaInput.addAction(action);
    },
    addVariable(variable) {
      this.$refs.FormulaInput.addVariable(variable);
    },
    selectVariable(variable) {
      this.variable = variable;
    },
    extend() {
      if (!this.variable) return;
      let fieldId = this.variable.fieldId;
      let field = getFormFieldById(this.formDefinition, fieldId) || this.getFieldById && this.getFieldById(fieldId);
      if(!field) return;
      this.$refs.FieldValueGetter.setData({fieldConfig: field});
    },
    addConst(constant) {
      this.$refs.FormulaInput.addConstant(constant);
    },
  },
  computed: {
    innerValue: {
      get() {
        return this.formula;
      },
      set(v) {
        this.$emit('change', v);
      },
    }
  }
};
</script>
<style>
.formula-config {
  width: 100%;
  height: 100%;
}
</style>